<template>
	<view class="">
		<view class="header_background">
			<image src="../../static/images/bl.png" mode=""></image>
		</view>
		<view class="userMessage">
			<view class="common_block">
				<view style="padding: 50upx 30upx;">
					<view class="flex_layout">
						<view class="left_img">
							<image :src="user.avatar?user.avatar:'../../static/images/user.png'" mode=""></image>
							<view class="sexImg">
								<image src="../../static/images/sex1.png" mode=""></image>
							</view>
						</view>
						<view class="right_text" @click="toLogin">
							<view class="">{{user.nickname?user.nickname:'未登录'}}</view>
							<text>{{user.bio?user.bio:'这个人很懒，什么也没写'}}</text>
						</view>
						<!-- <view class="edit_text"  @click="profile"><image src="../../static/images/operate1.png" mode=""></image></view> -->
					</view>

					<view class="operate_btn flex_layout">
						<view class="edit_code" @click="profile">
							<image src="../../static/images/operate1.png" mode=""></image>
							<text>编辑信息</text>
						</view>



						<block v-if="myClinicInfo.user_type==1 || myClinicInfo.user_type==2">
							<view class="erect_position"></view>
							<view class="edit_code" @click="gotoClinic">
								<image src="../../static/images/operate3.png" mode=""></image>
								<text>管理门店</text>
							</view>
						</block>
					</view>
				</view>
			</view>
			<view class="common_block">
				<view class="manageData_title flex_layout">
					<text>我的优惠券</text>
					<!-- <view class="" @click="gotoClinic">
						门店主页入口(临时入口)<image src="../../static/images/right.png" mode=""></image>
					</view> -->
				</view>
				<view class="manageData_list flex_layout">
					<view :class="selected==1?'manageData_text select':'manageData_text'" data-selected='1'
						data-type='-1' @click="selectCoupon">
						<view>{{myCouponCount.all}}</view>
						<text>全部</text>
					</view>
					<view :class="selected==2?'manageData_text select':'manageData_text'" data-selected='2'
						data-type='0' @click="selectCoupon">
						<view>{{myCouponCount.notuse}}</view>
						<text>未使用</text>
					</view>
					<view :class="selected==4?'manageData_text select':'manageData_text'" data-selected='4'
						data-type='2' @click="selectCoupon">
						<view>{{myCouponCount.finished}}</view>
						<text>已完成</text>
					</view>
					<view :class="selected==5?'manageData_text select':'manageData_text'" data-selected='5'
						data-type='3' @click="selectCoupon">
						<view>{{myCouponCount.outDate}}</view>
						<text>已失效</text>
					</view>
				</view>
			</view>
			<block v-if="myCouponLists.length">
				<view class="common_block nonebg">
					<view class="appointment_item" v-for="(item,index) in myCouponLists" :key="index">
						<block v-if="item.statusdata==0">
							<view class="appointment_content">
								<view class="appointment_top">
									<view class="content_title">{{item.category_name}}</view>
									<view class="store_text">{{item.clinic.name}}</view>

									<view class="content_message">
										<image src="../../static/images/address.png" mode=""></image>
										<text>{{item.clinic.addresstext}}</text>
									</view>
									<view class="content_message">
										<image src="../../static/images/phone.png" mode=""></image>
										<text>{{item.clinic.phonetext}}</text>
									</view>
									<view class="content_message">
										<image src="../../static/images/coupon.png" mode=""></image>
										<text>{{item.number}}</text>
									</view>
								</view>
								<view class="flex_layout employ">
									<view class="moneyNum">￥{{item.pricenumber}}</view>
									<view class="employBtn" :data-id="item.id" @click="employ">
										<button>去使用</button>
									</view>
								</view>
							</view>
						</block>
						<!--已完成-->
						<block v-if="item.statusdata==2">
							<view class="appointment_title flex_layout" :data-id="item.id" @click="employ">
								<view class="left_title">使用时间：{{item.finishtime}}</view>
								<view class="right_title flex_layout">
									<text class="wan"></text>
									已完成
								</view>
							</view>
							<view class="appointment_content" :data-id="item.id" @click="employ">
								<view class="appointment_top">
									<view class="content_title grey">{{item.category_name}}</view>
									<view class="store_text grey">{{item.clinic.name}}</view>
									<view class="content_message">
										<image src="../../static/images/address.png" mode=""></image>
										<text class="grey">{{item.clinic.addresstext}}</text>
									</view>
									<view class="content_message">
										<image src="../../static/images/phone.png" mode=""></image>
										<text class="grey">{{item.clinic.phonetext}}</text>
									</view>
									<view class="content_message">
										<image src="../../static/images/coupon.png" mode=""></image>
										<text class="grey">{{item.number}}</text>
									</view>
								</view>
								<view class="flex_layout employ">
									<view class="moneyNum grey">￥{{item.pricenumber}}</view>
									<view class="employBtn">

									</view>
									<view class="finishBg"></view>
								</view>
							</view>
						</block>
						<!--已失效-->
						<block v-if="item.statusdata==3 || item.statusdata==4">
							<view class="appointment_title flex_layout">
								<view class="left_title">有效期：{{item.begintime}}至{{item.endtime}}</view>
								<view class="right_title flex_layout">
									<text class="dai"></text>
									已失效
								</view>
							</view>
							<view class="appointment_content">
								<view class="appointment_top">
									<view class="content_title">{{item.category_name}}</view>
									<view class="appointment_info">
										<view v-html="item.descriptioncontent"></view>
									</view>
									<view class="flex_layout employ">
										<view class="moneyNum grey">￥{{item.pricenumber}}</view>
										<view class="employBtn">

										</view>
										<view class="outdateBg"></view>
									</view>
								</view>
							</view>

						</block>
					</view>
				</view>
			</block>
			<block v-else>
				<view class="common_block nonebg">
					<view class="appointment_item">
						<view class="noResult">暂无优惠券</view>
					</view>
				</view>
			</block>

		</view>
	</view>
</template>

<script>
	var _this;
	var page = 1,
		reachbottom = false;
	export default {
		data() {
			return {
				user: this.$common.userInfo(),
				statusdata: 0,
				myCouponCount: {
					all: '-',
					notused: '-',
					appointment: '-',
					finished: '-',
				},
				cancelLogin: false,
				myCouponLists: [],
				type: '-1',
				selected: '1',
				limit: 5,
				myClinicInfo: []
			}
		},
		onLoad() {
			//this.getApi();
		},
		mounted() {
			_this = this;
		},
		onShow() {
			page = 1
			reachbottom = false;
			this.myCouponLists = [];
			this.user = this.$common.userInfo();
			this.cancelLogin = this.$db.get('cancelLogin')
			if (this.user) {
				if (!this.user.mobile) {
					this.$common.navigateTo('/pages/user/bind');
				} else {
					this.$common.refreshUser(res => {
						if (this.user.avatar.indexOf("data:") != -1) {
							var cavatar = '/images/user.png';
							this.user.avatar = cavatar;
						}
					})
					this.getMyCouponCount();
					this.getMyCouponLists();
					this.getMyClinicInfo();
				}

			} else {
				if (!this.cancelLogin) {
					this.$common.modelShow('登陆提示', '即将进行登录操作，请确认',
						function() {
							//确认					
							_this.$common.toLogin();
						},
						function() {
							_this.$db.set('cancelLogin', true)
							_this.$common.navigateTo('/pages/index/index');
						},
						true, '取消', '确认')
				}
			}

		},
		// 加载更多
		onReachBottom: function() {
			if (!reachbottom) {
				this.getMyCouponLists();
			}
		},
		methods: {
			toLogin: function() {
				if(this.user.nickname){
					return;
				}
				this.$common.modelShow('登陆提示', '即将进行登录操作，请确认',
					function() {
						//确认	
						_this.$db.set('cancelLogin', false)
						_this.$common.toLogin();
					},
					function() {
						_this.$db.set('cancelLogin', true)
						_this.$common.navigateTo('/pages/index/index');
					},
					true, '取消', '确认')
			
		},
		//门店个人中心+用户+数据
		getMyClinicInfo: function() {
			var that = this;
			this.$common.loadToShow('努力加载中...')
			this.$api.getMyClinicInfo({},
				res => {
					this.$common.loadToHide();
					if (res.code == 1) {
						that.myClinicInfo = res.data
					}
					if (res.code == 0) {

					}
				}
			)
		},
		//获取选中的类型的优惠券,type=''代表全部，0代表未使用，1代表已预约,2代表已完成 
		selectCoupon: function(e) {
			page = 1;
			this.myCouponLists = [];
			reachbottom = false;
			this.type = e.currentTarget.dataset.type;
			this.selected = e.currentTarget.dataset.selected;
			this.getMyCouponCount();
			this.getMyCouponLists();
			console.log("type: ", this.type);
		},
		//获取优惠券数量
		getMyCouponCount: function() {
			var that = this;
			this.$api.getMyCouponCount({
					statusdata: that.statusdata
				},
				res => {
					console.log(res)
					if (res.code == 1) {
						that.myCouponCount = res.data
					}
					if (res.code == 0) {
						that.$common.errorToShow(res.msg, function() {
							//that.$common.navigateBack();
						})
					}
				}
			)
		},
		//test 接口
		//获取优惠券数量
		// getApi:function(){
		// 	var that=this;
		// 	this.$api.getClinicStaff(
		// 	{clinic_id:8,page:1,limit:10},
		// 	//this.$api.getSubAppointment(
		// 	   // {coupon_id:7,phonenumber:'13262299936',appointmenttime:'2020-11-25 12:00',contenttext:'',realname:'董诗广',clinic_id:9},
		// 		res => {
		// 			console.log(res)
		// 		}
		// 	)
		// },
		//获取优惠券具体数据
		getMyCouponLists: function() {
			var that = this;
			var type = that.type;
			this.$common.loadToShow()
			this.$api.getMyCouponLists({
					type: type,
					page: page,
					limit: that.limit
				},
				res => {
					this.$common.loadToHide();
					console.log(res)
					if (res.code == 1) {
						var pageClinicLists = res.data;
						var number = res.data.length;
						page++;
						uni.stopPullDownRefresh();
						if (number == 0) {
							reachbottom = true
							uni.showToast({
								"title": "已经加载全部",
								icon: "none",
								duration: 1000
							});
						} else {
							console.log(pageClinicLists);
							that.myCouponLists = that.myCouponLists.concat(pageClinicLists);
						}
					}
					if (res.code == 0) {
						uni.showToast({
							title: res.msg,
							icon: "none",
							duration: 1000
						})
					}
				}
			)
		},
		gotoClinic: function() {
			uni.navigateTo({
				url: "../user/user"
			})
		},
		profile: function() {
			uni.navigateTo({
				url: "../user/edit"
			})
		},
		qrcode: function() {
			uni.scanCode({
				success: function(res) {
					console.log('条码类型：' + res.scanType);
					console.log('条码内容：' + res.result);
				}
			});
		},
		edit: function() {
			uni.navigateTo({
				url: '../user/edit'
			})
		},
		employ: function(e) {
			var id = e.currentTarget.dataset.id;
			uni.navigateTo({
				url: '../index/detail?id=' + id
			})
		},
		//去预约
		quyuyue: function(e) {
			var id = e.currentTarget.dataset.id;
			uni.navigateTo({
				url: '../user/employ?id=' + id
			})
		},
		//已预约还没有审核结果，跳到详情
		yuyuedetail: function(e) {
			var id = e.currentTarget.dataset.id;
			uni.navigateTo({
				url: 'detail?id=' + id
			})
		},
		//我的预约
		appointment: function(e) {
			uni.navigateTo({
				url: 'myyuyue?type=1'
			})
		}
	}
	}
</script>

<style>
	@import url('../../common/common.css');

	page {
		background: #f8f8f8;
	}

	.flex_layout {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}

	.header_background {
		position: relative;
		width: 100%;
		height: 220upx;
		background: #2562a1;
		z-index: -1;
	}

	.header_background image {
		position: absolute;
		display: block;
		left: 0;
		bottom: 0;
		height: 70upx;
		width: 100%;
	}

	.userMessage {
		width: 690upx;
		margin: -160upx auto 0;
	}

	.common_block {
		background: #fff;
		border-radius: 10px;
		margin-bottom: 20upx;
	}

	.nonebg {
		background: none !important;
	}

	.left_img {
		position: relative;
		width: 114upx;
		height: 114upx;
	}

	.left_img>image {
		display: block;
		width: 114upx;
		height: 114upx;
		border-radius: 50%;
	}

	.sexImg {
		position: absolute;
		bottom: 10upx;
		right: 0;
		height: 30upx;
		width: 48upx;
		border-radius: 30upx;
		background: #2562a1;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.sexImg image {
		display: block;
		width: 20upx;
		height: 21upx;
	}

	.right_text {
		padding-left: 30upx;
	}

	.right_text view {
		color: #333333;
		font-size: 30upx;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.right_text text {
		color: #999;
		font-size: 24upx;
		margin-top: 20upx;
		display: block;
	}

	.edit_text {
		box-sizing: border-box;
	}

	.edit_text image {
		width: 40upx;
		height: 40upx;
	}

	.operate_btn {
		background: #e8f3ff;
		justify-content: space-around;
		height: 60upx;
		margin-top: 30upx;
		margin-bottom: 10upx;
	}

	.erect_position {
		height: 36upx;
		width: 1px;
		background: #2562a1;
	}

	.edit_code {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.edit_code image {
		width: 30upx;
		height: 30upx;
		margin-right: 20upx;
	}

	.edit_code text {
		color: #2562a1;
		font-size: 24upx;
	}

	.manageData_title {
		border-bottom: 1px solid #f2f2f2;
		padding: 30upx 20upx;
		justify-content: space-between;
	}

	.manageData_title text {
		color: #333;
		font-size: 30upx;
	}

	.manageData_title view {
		color: #999999;
		font-size: 24upx;
		display: flex;
		align-items: center;
	}

	.manageData_title view image {
		width: 13upx;
		height: 23upx;
		margin-left: 20upx;
	}

	.manageData_list {
		padding: 0 30upx;
		justify-content: space-between;
	}

	.manageData_text {
		padding: 20upx;
	}

	.manageData_text view {
		text-align: center;
		color: #333;
		font-size: 40upx;
		height: 40upx;
	}

	.manageData_text text {
		display: block;
		text-align: center;
		font-size: 24upx;
		color: #666;
		margin-top: 10upx;
		height: 40upx;
	}

	.select view,
	.select text {
		color: #2562a1 !important;
		font-weight: bold;
	}

	.menu_item {
		padding: 50upx 30upx;
		border-bottom: 1px solid #f8f8f8;
		display: flex;
		align-items: center;
		color: #333;
		font-size: 30upx;
	}

	.menu_item image {
		width: 36upx;
		height: 36upx;
		display: block;
		margin-right: 30upx;
	}

	.menu_item:last-child {
		border-bottom: none;
	}

	.appointment_item {
		background: #fff;
		border-radius: 10px;
		margin-bottom: 20upx
	}

	.appointment_item:last-child {
		border: none
	}

	.appointment_title {
		justify-content: space-between;
		padding: 20upx 30upx;
		border-bottom: 1px solid #f8f8f8;
	}

	.left_title {
		color: #999;
		font-size: 24upx;
	}

	.right_title {
		color: #999;
		font-size: 24upx;
	}

	.right_title text {
		display: inline-block;
		margin-right: 10upx;
	}

	.right_title text.dai {
		border: 2upx solid #1a67b8;
		width: 10upx;
		height: 10upx;
		border-radius: 10upx;
	}

	.right_title text.yi {
		background: #1a67b8;
		width: 14upx;
		height: 14upx;
		border-radius: 14upx;
		color: ##1a67b8;
	}

	.right_title text.wan {
		background: #ccc;
		border: 2upx solid #ccc;
		width: 10upx;
		height: 10upx;
		border-radius: 10upx;
	}

	.appointment_content {
		padding: 40upx 30upx;
	}

	.content_title {
		color: #333;
		font-size: 36upx;
		font-weight: bolder;
	}

	.content_message {
		margin-top: 20upx;
	}

	.content_message image {
		width: 24upx;
		height: 24upx;
	}

	.content_message text {
		color: #666;
		font-size: 24upx;
		margin-left: 20upx;
	}

	.content_message_flex {
		justify-content: space-between;
	}

	.moneyNum {
		color: #f44141;
		font-size: 36upx;
	}

	.appointment_top {
		padding-bottom: 30upx;
	}

	.appointment_info {
		background: #e8f3ff;
		padding: 30upx;
		line-height: 1.5;
		color: #2562a1;
		font-size: 24upx;
		margin-top: 20upx;
	}

	.appointment_info view {
		line-height: 2;
	}

	.employ {
		justify-content: space-between;
		padding-top: 30upx;
		border-top: 1px solid #f8f8f8;
		position: relative;
	}

	.store_text {
		padding: 10upx 20upx 6upx;
		background: #e8f3ff;
		border-radius: 100px;
		color: #2562a1;
		font-size: 22upx;
		line-height: 1;
		margin-top: 20upx;
		display: inline-block;
	}

	.employBtn button {
		color: #fefefe;
		font-size: 24upx;
		width: 140upx;
		height: 45upx;
		border-radius: 45upx;
		background: #2562a1;
		padding: 0;
		line-height: 45upx;
		margin: 0;
	}

	.finishBg {
		background-image: url(../../static/images/use.png);
		background-size: contain;
		position: absolute;
		bottom: 0;
		right: 0;
		height: 150upx;
		width: 140upx;
	}

	.outdateBg {
		background-image: url(../../static/images/outdate.png);
		background-size: contain;
		position: absolute;
		bottom: 0;
		right: 0;
		height: 150upx;
		width: 140upx;
	}

	.grey {
		color: #999 !important;
	}

	.noResult {
		padding: 30upx;
		font-size: 30upx;
		text-align: center;
		color: #ccc;
	}

	.pointOut_text {
		background: #e8f3ff;
		color: #999;
		padding: 10upx;
		margin-top: 20upx;
		border-radius: 10upx;
		font-size: 22upx;
		text-align: center;
	}

	.pointOut_text_color {
		background: #ffd7d7;
		color: #999;
		padding: 10upx;
		margin-top: 20upx;
		border-radius: 10upx;
		font-size: 22upx;
		text-align: center;
	}
</style>